<template>
    <view class="container">
        <!-- 申请列表 -->
        <view class="approval-list">
            <view class="approval-item" v-for="(item, index) in approvalList" :key="index">
                <view class="user-info">
                    <image class="avatar" :src="item.avatar || '/static/avatars/default-avatar.jpg'" mode="aspectFill"></image>
                    <view class="info-content">
                        <text class="nickname">{{item.nickName}}</text>
                        <text class="apply-time">申请时间：{{item.createTime}}</text>
                    </view>
                    <view class="status-tag" :class="item.status">{{statusText[item.status]}}</view>
                </view>
                <view class="action-buttons" v-if="item.status === 'pending'">
                    <input class="remark-input" v-model="item.remark" placeholder="填写审批意见（选填）" />
                    <view class="btn-group">
                        <button class="reject-btn" @tap="handleReject(item)">拒绝</button>
                        <button class="approve-btn" @tap="handleApprove(item)">同意</button>
                    </view>
                </view>
                <view class="remark" v-if="item.remark">
                    <text class="remark-label">审批意见：</text>
                    <text class="remark-content">{{item.remark}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getSignupList, updateSignup } from '@/api/youqiu/signups.js'

export default {
    data() {
        return {
            activityId: '',
            approvalList: [],
            statusText: {
                pending: '待审批',
                approved: '已同意',
                rejected: '已拒绝'
            }
        }
    },
    onLoad(options) {
        this.activityId = options.id
        this.getApprovalList()
    },
    methods: {
        // 获取申请列表
        getApprovalList() {
            getSignupList({
                activityId: this.activityId,
                status: 'pending'
            }).then(res => {
                this.approvalList = res.rows
            })
        },
        // 同意申请
        handleApprove(item) {
            updateSignup({
                id: item.id,
                status: 'approved',
                remark: item.remark
            }).then(() => {
                uni.showToast({
                    title: '已同意',
                    icon: 'success'
                })
                this.getApprovalList()
            })
        },
        // 拒绝申请
        handleReject(item) {
            updateSignup({
                id: item.id,
                status: 'rejected',
                remark: item.remark
            }).then(() => {
                uni.showToast({
                    title: '已拒绝',
                    icon: 'success'
                })
                this.getApprovalList()
            })
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
}

.approval-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
}

.user-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.info-content {
    flex: 1;
}

.nickname {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
}

.apply-time {
    font-size: 24rpx;
    color: #999;
    display: block;
    margin-top: 8rpx;
}

.status-tag {
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
}

.status-tag.pending {
    color: #ff9800;
    background: #fff5e6;
}

.status-tag.approved {
    color: #4caf50;
    background: #e8f5e9;
}

.status-tag.rejected {
    color: #f44336;
    background: #ffebee;
}

.action-buttons {
    margin-top: 20rpx;
}

.remark-input {
    background: #f5f5f5;
    padding: 20rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
    margin-bottom: 20rpx;
}

.btn-group {
    display: flex;
    gap: 20rpx;
}

.reject-btn, .approve-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.reject-btn {
    background: #f5f5f5;
    color: #666;
}

.approve-btn {
    background: #4caf50;
    color: #fff;
}

.remark {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #666;
}

.remark-label {
    color: #999;
}
</style> 